<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title th:text="#{i18n.text_6}"></title>
	<head th:replace="head"></head>
	<style>
		button, input, .btn {
			transition: all .3s ease
		}

		a{
			color: #20A0FF;
		}

		.form-base{
			background: #FFFFFF;
			padding: 20px 30px;
			border-radius: 4px;
			box-shadow: 0 1px 5px #ccc;
		}

		input.form-control{
			border: 1px solid #d1d1d1;
			height: 36px;
			background: none;
			box-shadow: none;
			outline: none;
		}

		input.form-control:focus{
			box-shadow: none;
			outline: none;
			border-color: #20A0FF;
		}

		img.captcha{
			width: 100%;
			height: 36px;
		}

		button.btn:focus,button.btn:active{
			box-shadow: none;
			outline: none;
		}

		button.btn.btn-submit{
			border-radius: 2px;
			background: #20A0FF;
			color: #FFFFFF;
			height: 36px;
		}

		button.btn.btn-captcha{
			border-radius: 2px;
			background: #475669;
			color: #FFFFFF;
			height: 36px;
		}

		.blue-title{
			color: #20A0FF;
		}

		#main-center{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: stretch;
			background-color: #f5f5f5;
		}

		a.gray-href{
			color: #888888;
		}

		a.gray-href:hover{
			text-decoration: none;
		}

		font.second{
			color: #FF4949;
			font-size: 2em;
		}

		label.error{
			color: #FF4949;
			position: absolute;
			font-weight: 500;
			display: block;
			font-size: 12px;
			transition: all .3s ease;
		}

		input.form-control.error{
			border-color: #FF4949 !important;
		}

		.err-msg{
			margin: 0px;
			font-size: 12px;
			color: #FF4949;
			background: rgba(255, 73, 73, 0.1);
			border: #FF4949 1px solid;
			padding: 10px;
			margin-bottom: 5px;
			border-radius: 4px;
		}

		.login-state-box{
			background: #FFFFFF;
			border-radius: 4px;
			overflow: hidden;
		}

		.login-state-box .detail{
			padding: 36px;
			font-size: 14px;
		}

		.login-state-box .cas-user{
			background: #7F8FA3;
			padding: 36px 36px;
			text-align: center;
			color: rgba(255, 255, 255, .8);
		}

		.login-state-box .cas-user img{
			height: 80px;
			width: 80px;
			border-radius: 50%;
		}

		.info-base{
			background: #FFFFFF;
			padding: 20px 30px;
		}

		.result-logo{
			font-size: 50px;
			color: #FFFFFF;
		}

		.error-box{
			padding: 100px 0px;
		}

		.error-box .icon{
			text-align: center;
			margin-bottom: 16px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: flex-end;
			font-size: 32px;
			color: #0073aa;
		}

		.error-box .icon img{
			height: 100px;
		}

		.error-box .desc{
			font-size: 14px;
			line-height: 36px;
			color: #262626;
			text-align: center;
		}

	</style>
</head>
<body>
<nav th:replace="nav"/>
<section class="layout">
	<div id="main-center" style="min-height: 596px;">
		<div class="container">
			<div class="row">
				<div class="col-xs-6 col-xs-offset-3">
					<div class="form-base">
						<h4 class="text-center blue-title" th:text="#{i18n.text_6}"></h4>
						<div class="err-msg" style="display:none"></div>
						<div class="form-horizontal" id="loginForm" novalidate="novalidate">
							<div class="form-group">
								<div class="col-xs-12">
									<label th:text="#{i18n.text_7}"></label>
									<input name="username" id="username" class="form-control emailText" required=""  aria-required="true"/>
									<label id="username-error" class="error" for="username"></label>
								</div>
							</div>
							<div class="form-group">
								<div class="col-xs-12">
									<label th:text="#{i18n.text_8}"></label>
									<input type="password" name="password" id="password" class="form-control" placeholder="" required="" aria-required="true"/>
									<label id="username-error" class="error" for="username"></label>
								</div>
							</div>
							<div class="form-group imageDiv" style="display:none">
								<div class="col-xs-8">
									<label th:text="#{i18n.text_9}"></label>
									<input name="captcha" id="imageCode" class="form-control valid" required="" aria-required="true" aria-invalid="false"/><label id="captcha-error" class="error" for="captcha" style="display: none;"></label>
								</div>
								<div class="col-xs-4" style="padding-left: 0px;padding-top: 25px;">
									<a href="javascript:;"><img class="captcha" id="image" src="/valicode"/></a>
								</div>
							</div>
							<div class="form-group">
								<div class="col-xs-12">
									<button  class="btn btn-block btn-submit" th:text="#{i18n.text_6}"></button>
								</div>
							</div>
							<div class="form-group">
								<div class="col-xs-6">
									<a class="gray-href" th:href="@{/forgotPwd/}" th:text="#{i18n.text_10}">
									</a>
								</div>
								<div class="col-xs-6 text-right">
									<a th:href="@{/register}" th:text="#{i18n.text_11}">
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<footer th:replace="footer"/>
<script th:src="@{/js/login.min.js}"/>
</body>
</html>